<template>
	<view>

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>OTA订单</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<view style="display: flex;" @click="showStatus=!showStatus">
					<text class="city">{{storeName}}</text>
					<u-icon :name="showStatus ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
				</view>

				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="按车牌号/客户名称/联系电话查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
				
				<image @click="showFilter=!showFilter" src="/static/other/filter_ota.png" style="width: 40rpx;height: 40rpx;" mode="scaleToFill"></image>
				
			</view>
		</u-sticky>
		

		<mescroll-body id="mescroll" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index" @click="itemclick(item)">
				
				<view class="title-wrap" style="justify-content: flex-start;">
					<text style="font-size: 28rpx;color: black;">订单编号:{{item.orderEncryptId}}</text>
					<text class="order-source">{{item.orderSource}}</text>
					<text style="flex: 1;"></text>
					<text class="order-status">{{item.orderStatusName}}</text>
				</view>
				
				<view class="content-wrap">
					<text class="name">预定车辆：</text>
					<text class="value">{{item.carLicenceNum||'--'}}({{item.reserveVehicleInfos}})</text>
				</view>

				<view class="content-wrap">
					<text class="name">客户信息：</text>
					<text class="value" style="flex: inherit;">{{item.costumerName}}  {{item.costumerTel}}</text>
					<image src="/static/other/ota_phone.png" @click.stop="makephone(item.costumerTel)" mode="scaleToFill"></image>
				</view>
				
				<view class="content-wrap">
					<text class="name">租金总额：</text>
					<text class="value">￥{{item.amount||'--'}}</text>
				</view>
				
				<view class="content-wrap">
					<text class="name">取还信息：</text>
					<text class="value">{{item.pickUpAddress}}--{{item.pickOffAddress}}</text>
				</view>
				
				<view class="content-wrap" style="justify-content: space-between;">
					<text style="font-size: 24rpx;color: #FF001D;">预取:{{item.estimatedPickUpTime}}</text>
					<text style="font-size: 24rpx;color: #FF6600;">预还:{{item.estimatedPickOffTime}}</text>
				</view>
				
				<view class="content-wrap" style="justify-content: space-between;">
					<text style="font-size: 24rpx;color: #FF001D;">实取:{{item.actualPickUpTime||'--'}}</text>
					<text style="font-size: 24rpx;color: #FF6600;">实还:{{item.actualPickOffTime||'--'}}</text>
				</view>
				
			</view>
		</mescroll-body>
     
		
		<view v-if="showFilter" @click="showFilter=false" class="filterPop" :style="[{top:popTop}]" @touchmove.stop.prevent="preventTouchMove">
			<view @click.stop="" class="filterContent">
				
				<scroll-view scroll-y="true" style="width: 100%;height: 503rpx;">
					
					<view style="display: flex;flex-direction: column;">
						<text class="filter-title">订单来源</text>
						
						<view class="filter-content">
							<text class="filter-item" :class="item.check?'active':''"
							 v-for="(item, index) in sourceList" :key="index"
							  @click.stop="sourceClick(index)">
								{{item.dictLabel}}
							</text>
						</view>
						
						
						<text v-if="childStateList && childStateList.length>0" class="filter-title">订单状态</text>
						
						<view v-if="childStateList && childStateList.length>0" class="filter-content">
							<text class="filter-item" :class="item.check?'active':''"
							 v-for="(item, index) in childStateList" :key="index"
							  @click.stop="childStateClick(index)">
								{{item.label}}
							</text>
						</view>
						
						<text class="filter-title">快捷筛选</text>
						
						<view class="filter-content">
							<text class="filter-item" :class="item.check?'active':''"
							 v-for="(item, index) in stateList" :key="index"
							  @click.stop="stateClick(index)">
								{{item.name}}
							</text>
						</view>
						
					</view>
					
				</scroll-view>
				
				<view class="filter-bottom">
					<text class="cancel" @click.stop="cancelFilter">取消</text>
					<text class="confirm" @click.stop="confirmFilter">确定</text>
				</view>

			</view>
		</view>
		
		<!-- 门店picker -->
		<u-picker
			:show="showStatus"
			:columns="storeList"
			keyName="name"
			closeOnClickOverlay
			@close="showStatus = false"
			@cancel="showStatus = false"
			title="选择门店"
			confirmColor="#1573FF"
			@confirm="confimStore"
		></u-picker>
		
	</view>
</template>

<script>
	import {otactriplist, dictdatatype} from '@/api/car-api.js';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				isSearch: false,
				showStatus : false,
				keyword : '',
				storeName: '选择门店',
				orderSourceCode:'',
				orderStatusName:'',
				type:'',
				popTop: '',
				storeId:'',
				list: [],
				showFilter:false,
				sourceList:[],
				stateList:[
					{
					  key: '1',
					  name: '全部订单',
					},
					{
					  key: '2',
					  name: '待排车',
					},
					{
					  key: '3',
					  name: '待取车',
					},
					{
					  key: '4',
					  name: '用车中',
					},
					{
					  key: '5',
					  name: '明日取车',
					},
					{
					  key: '6',
					  name: '明日还车',
					},
					{
					  key: '7',
					  name: '今日取车',
					},
					{
					  key: '8',
					  name: '今日还车',
					},
					{
					  key: '9',
					  name: '2小时内取车',
					},
					{
					  key: '10',
					  name: '2小时内还车',
					},
					{
					  key: '11',
					  name: '逾期未取车',
					},
					{
					  key: '12',
					  name: '逾期未还车',
					}
				],
				childStateList:[],

			};
		},
		computed:{
			storeList() {
				var result = [this.$store.state.initData.initData.storeList];
				return result;
			},
		},
		onReady() {
			//监听筛选组件距离顶部的距离
			const query = uni.createSelectorQuery();
			query.select('#mescroll').boundingClientRect();
			query.exec((res) => {
				this.popTop = res[0].top + 'px'
			
			})
		},
		onLoad(option) {
			if(!uni.$u.test.isEmpty(option.otaPlat)){
				this.type = option.otakey
				this.orderSourceCode = option.otaPlat
				
				console.log('收到 option.otaPlat==>'+option.otaPlat);
				console.log('收到 option.otakey==>'+option.otakey);
			}
			
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight']
			 + (92 / 750 * uni.getSystemInfoSync().windowWidth) - 0.5;
			 
			this.getCount(option);
			
		},
		methods: {
			upCallback(page) {
				console.log("开始请求");
				
				var params = {
					keyWord: this.keyword,
					storeId: this.storeId,
					orderSourceCode: this.orderSourceCode,
					orderStatusName: this.orderStatusName,
					type: this.type,
					pageNum: page.num,
					pageSize: page.size,
				}
				otactriplist(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.mescroll.triggerDownScroll();
			},
			//选择门店
			confimStore(e) {
				this.storeId = e.value[0].id;
				this.storeName = e.value[0].name;
				this.showStatus = false;
				this.mescroll.triggerDownScroll();
			},
			
			makephone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			
			getCount(option){
				dictdatatype('ota_order_resource').then(res=>{
					this.sourceList = [
						{
							dictLabel: "全部",
							dictValue: ""
						},
						...res.data
					]
					
					
					if(!uni.$u.test.isEmpty(option.otaPlat)){
						const stateobj = this.stateList.find(item=>item.key==option.otakey);
						if(stateobj){
							stateobj.check = true
							
						}
						
						const sourceobj = this.sourceList.find(item=>item.dictValue==option.otaPlat)
						if(sourceobj){
							sourceobj.check = true
							
							this.childStateList = this.getChildList(sourceobj.dictValue)
						}
						
						this.$forceUpdate()
					}
					
				})
				
			},
			
			sourceClick(index, str){
				this.sourceList.forEach((item, i)=>{
					item.check = index===i
					
				})
				
				this.childStateList = this.getChildList(this.sourceList[index].dictValue)
				
				const childStateIndex = this.childStateList.findIndex(item=>item.label==str);
				
				this.childStateClick(childStateIndex)
				
				this.$forceUpdate()
			},
			
			getChildList(state){
				switch (state) {
				        case "xc":
				          return [
				            {"label": "已取消" },
				            {"label": "取消中" },
				            {"label": "已退订" },
				            {"label": "已确认" },
				            {"label": "已下单" },
				            {"label": "已支付" },
				            {"label": "已排车" },
				            {"label": "已取车" },
				            {"label": "已续租" },
				            {"label": "已暂停" },
				            {"label": "已还车" },
				            {"label": "已完成" },
				            {"label": "租车预授权已结算" },
				            {"label": "已三次结算" }
				          ];
				        case "zzc":
				          return [
				            {"label": "已取消"},
				            {"label": "待定"},
				            {"label": "未支付"},
				            {"label": "支付中"},
				            {"label": "已支付"},
				            {"label": "已确认"},
				            {"label": "已提车"},
				            {"label": "已还车"},
				            {"label": "已完成"}
				          ];
				        case "wk":
				          return [
				            {"label": "已取消"},
				            {"label": "待接受预订"},
				            {"label": "待支付"},
				            {"label": "待用车"},
				            {"label": "用车中"},
				            {"label": "待结算"},
				            {"label": "待违章处理"},
				            {"label": "已完成"},
				          ];
				        case "fz":
				          return [
				            {"label": "已取消"},
				            {"label": "待支付"},
				            {"label": "已支付"},
				            {"label": "已确认"},
				            {"label": "已取车"},
				            {"label": "已还车"},
				            {"label": "已完成"}
				          ];
				        case "at":
				          return [
				            {"label": "已取消"},
				            {"label": "已下单"},
				            {"label": "已排车"},
				            {"label": "已支付"},
				            {"label": "已取车"},
				            {"label": "已还车"},
				            {"label": "已完成"}
				          ];
				        case "hl":
				          return [
				            {"label": "已取消"},
				            {"label": "待取车"},
				            {"label": "待还车"},
				            {"label": "已完成"}
				          ];
				        default:
				          return [];
				      }
			},
			
			stateClick(index){
				this.stateList.forEach((item, i)=>{
					item.check = index===i
				})
				
				this.$forceUpdate()
			},
			
			childStateClick(index){
				this.childStateList.forEach((item, i)=>{
					item.check = index===i
				})
				
				this.$forceUpdate()
			},
			
			preventTouchMove(){
				
			},
			
			confirmFilter(){
				this.showFilter = false
				
				this.orderSourceCode = this.sourceList.find(item=>item.check)?this.sourceList.find(item=>item.check).dictValue:''
				
				this.orderStatusName = this.childStateList.find(item=>item.check)?this.childStateList.find(item=>item.check).label:''
				
				this.type = this.stateList.find(item=>item.check)?this.stateList.find(item=>item.check).key:''
				
				this.mescroll.triggerDownScroll();
			},
			
			cancelFilter(){
				this.showFilter = false
				
				const sourceIndex = this.sourceList.findIndex(item=>item.dictValue==this.orderSourceCode);
				
				const stateIndex = this.stateList.findIndex(item=>item.key==this.type);
				
				this.sourceClick(sourceIndex, this.orderStatusName)
				
				this.stateClick(stateIndex)
			},
			
			itemclick(item){
				uni.navigateTo({
					url:'/workbench/ota/otadetail?id='+item.orderEncryptId,
				})
			},

		}
	};
</script>

<style lang="scss" scoped>
	
	.order-source{
		font-size: 22rpx;
		padding: 2rpx 5rpx;
		color: #00bfbf;
		border-radius: 8rpx;
		border: 1rpx solid #00bfbf;
		margin-left: 5rpx;
		white-space: nowrap;
	}
	
	.title-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 106rpx;
		padding: 0 22rpx;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -47rpx;
      right: 0;
      height: 2rpx;
      background-color: #f5f5f5;
    }
	}

  .order-status{
    color: #02BFBE;
    font-size: 28rpx;
  }

  .content-wrap{
    display: flex;
    align-items: flex-start;
    margin: 20rpx;

    .name{
      font-size: 28rpx;
      color: #666;
    }

    .value{
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
	
	image{
		width: 32rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}
  }
	
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 30rpx;
		}
	}

	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0;
		color: #666;
		font-size: 28rpx;
    display: flex;
    flex-direction: column;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}
	
	.filterPop {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999999999;
	
		.filterContent {
			background-color: #ffffff;
			height: 639rpx;
			
			
			.filter-title{
				font-size: 28rpx;
				color: #333;
				margin: 23rpx 20rpx;
				
			}
			
			.filter-content{
				margin-left: 43rpx;
				display: flex;
				flex-wrap: wrap;
			}
			
			.filter-item{
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 28rpx;
				background-color: #EFEFEF;
				color: #666666;
				margin: 0 30rpx 23rpx 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				
				&.active{
					color: #fff;
					background-color: #1673FF;
				}
			}
	
			.filter-bottom{
				height: 68rpx;
				display: flex;
				margin: 34rpx 46rpx;
				background-color: #1673FF;
				box-sizing: border-box;
				border-radius: 8rpx;
				
				.cancel{
					flex: 1;
					text-align: center;
					line-height: 68rpx;
					color: #1673FF;
					background-color: #FFFFFF;
					margin: 2rpx;
					border-radius: 8rpx;
				}
				
				.confirm{
					flex: 1;
					text-align: center;
					line-height: 68rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
